<template>
  <view :class="'page-container-outcome ' + extraClass " v-show="show">

    <ul>
      <li class="body-item" v-for="item in list" @click="(e)=>selectItem(item)">
        <svg-icon v-if="!item.choose" :width="28" :height="28" :box-height="50" :box-width="50" :icon="item.title" background="#eee"  />
        <svg-icon v-else :width="28" :height="28" :box-height="50" :box-width="50" :icon="item.title" background="pink" fill-color="hotpink" />
        <span class="body-item-title">
            {{item.title}}
          </span>
      </li>

      <li class="body-item" >
        <svg-icon :width="28" :height="28" :box-height="50" :box-width="50" icon="设置" background="#eee"/>
        <span class="body-item-title">
            设置
          </span>
      </li>
    </ul>

  </view>
</template>

<script>
import SvgIcon from "@/pages/svg-icon.vue";

export default {
  components: {SvgIcon},
  data() {
    return {
      show:false,

      extraClass:'background-animation-none-outcome',
      list:[
        {title:'工资',choose:false},
        {title:'兼职',choose:false},
        {title:'理财',choose:false},
        {title:'礼金',choose:false},
        {title:'其他',choose:false},
        {title:'退税',choose:false},
        {title:'报销',choose:false},

        // {title:'设置'},

      ],
    }
  },
  props: {},
  methods: {

    selectItem(item){
      let idx = -1
      for (let i = 0; i < this.list.length; i++) {
        if(this.list[i] === item){
          idx = i
          this.list[i] .choose=true
        }else{
          this.list[i] .choose=false

        }
      }
    },

    enterPage(){
      this.show = true
      this.extraClass = 'background-animation-enter-outcome'
    },
    leavePage(){
      this.extraClass = 'background-animation-leave-outcome'
      setTimeout(()=>{
        this.show = false
      },300)
    },
  },
  onLoad(event) {

  }
}
</script>
<style scoped>
ul{
  border:  0;
  padding: 0;
  background: white;
  max-height: calc(100vh - 50px);
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.icon-container{
  background: green;
  width: 30px;
  height: 30px;

}
.body-item{
  height: 100px;
  flex-basis: 25%;
  //background: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;



}
.body-item-title{
}


.page-container-outcome{
  position: absolute;
  width: 100%;
  height: 100%;
}
.background-animation-none-outcome{
  left: 100vh !important;
}

.background-animation-enter-outcome{

  animation-name: hd-enter-outcome;
  animation-duration: 300ms;
}
.background-animation-leave-outcome{

  animation-name: hd-leave-outcome;
  animation-duration: 300ms;
  left: 100vw;

}

@keyframes hd-enter-outcome {
  0% {
    left: 100vw;
  }
  100% {
    left: 0;
  }
}
@keyframes hd-leave-outcome {
  0% {
    left: 0;
  }
  100% {
    left: 100vw;
  }
}

</style>